<template>
    <div class="flexbox com_box height_100">
        <AddDepart />
        <EditDepart />
        <AddChildDepart />
        <AddMember />
        <EditMember />
        <AddFun />
        <EditFun />
        <MemberJur />
        <div class="person_left">
            <div class="flexbox flexcolumn height_100">
                <div class="person_header">
                    <ul class="per_tab flexbox">
                        <li :class="{active:currActive==0}" @click="changePart(0,'全部人员')">企业架构</li>
                        <li :class="{active:currActive==1}" @click="changePart(1,'全部')">职能</li>
                    </ul>
                </div>
                <div class="person_job flex1" v-if="currActive==0">
                    <div class="person_btn">
                        <el-button icon="el-icon-circle-plus-outline" plain style="width:100%" @click="addDepart">添加部门</el-button>
                    </div>
                    <el-tree ref="tree" accordion :expand-on-click-node='true' :data="departData" highlight-current :current-node-key="currentNodekey" @node-click="getTreeData" class="part_tree" node-key="id" :default-expanded-keys="isOpen" :props="defaultProps">
                        <div class="flexbox flexcenter flexbetween custom-tree-node" slot-scope="{ node, data }">
                            <div class="part_left flexbox flexcenter">
                                <img src="../../assets/img/tree_icon.svg" alt="" class="tree_icon">
                                <span class="tree_title">{{node.label}}</span>
                            </div>
                            <div class="part_right flexbox flexcenter" v-if="data.id !=0">
                                <el-dropdown placement='bottom'>
                                    <div class="icon_btn flexbox flexcenter tree_img" @click.stop='return false'><img src="../../assets/img/more_icon.svg" alt=""></div>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>
                                            <div class="drop_item flexbox flexcenter" @click.stop='editDepart(data)'>
                                                <img src="../../assets/img/edit_icon2.svg" alt="" class="drop_icon">
                                                <span class="drop_title">重命名</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <div class="drop_item flexbox flexcenter" @click.stop="delDepart(data)">
                                                <img src="../../assets/img/del_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">删除部门</span>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-tooltip class="item" effect="dark" content="创建子部门" placement="top">
                                    <div class="icon_btn flexbox flexcenter tree_img" @click.stop="addChildDepart(data)"><img src="../../assets/img/add_icon.svg" alt=""></div>
                                </el-tooltip>
                            </div>
                        </div>
                    </el-tree>
                </div>
                <div class="person_job flex1" v-else>
                    <div class="person_btn">
                        <el-button icon="el-icon-circle-plus-outline" plain style="width:100%" @click="addFun()">添加职能</el-button>
                    </div>
                    <ul class="fun_list">
                        <li class="fun_item flexbox flexcenter flexbetween" :class="{active:currFun==-1}" @click="getFunData(0,-1,'全部')">
                            <div class="fun_title flexbox flexcenter">
                                <img src="../../assets/img/fun_icon.svg" alt="" class="fun_img">
                                <span class="fun_name">全部</span>
                            </div>
                        </li>
                        <li class="fun_item flexbox flexcenter flexbetween" :class="{active:currFun==index}" v-for="(item,index) in funData" :key="index" @click="getFunData(item.id,index,item.name)">
                            <div class="fun_title flexbox flexcenter">
                                <img src="../../assets/img/fun_icon.svg" alt="" class="fun_img">
                                <span class="fun_name">{{item.name}}</span>
                            </div>
                            <el-dropdown placement='bottom'>
                                <div class="icon_btn flexbox flexcenter tree_img fun_do" @click.stop='return false'><img src="../../assets/img/more_icon.svg" alt=""></div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <div class="drop_item flexbox flexcenter" @click.stop='editFun(item)'>
                                            <img src="../../assets/img/edit_icon2.svg" alt="" class="drop_icon">
                                            <span class="drop_title">重命名</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <div class="drop_item flexbox flexcenter" @click.stop="delFun(item)">
                                            <img src="../../assets/img/del_icon.svg" alt="" class="drop_icon">
                                            <span class="drop_title">删除职能</span>
                                        </div>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="person_right">
            <div class="flexbox flexcolumn height_100">
                <div class="person_header flexbox flexcenter flexbetween">
                    <div class="has_check flexbox flexcenter flexbetween" v-if="users.length>0">
                        <div class="has_ch_left">
                            <span class="has_text">已选中{{users.length}}项</span>
                            <span class="has_btn" @click="memberJur">权限设置</span>
                            <span class="has_btn" @click="batchActMember(1)">激活用户</span>
                            <span class="has_btn" @click="batchDisaMember(0)">禁用用户</span>
                        </div>
                        <div class="close_check" @click="closeCheck"><img src="../../assets/img/close_check.svg" alt=""></div>
                    </div>
                    <template v-else>
                        <div class="person_title">
                            {{title}} · {{total}}人
                        </div>
                        <div class="person_search flexbox flexcenter">
                            <el-input placeholder="姓名、手机号、唯一码" size="small" style="width:216px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                            </el-input>
                            <el-button plain style="margin-left:12px" size="small" @click="addChildDepart(memberData)" v-if="memberData.id!=0 && memberData.id">创建子部门</el-button>
                            <el-button type="primary" style="margin-left:12px" size="small" icon="el-icon-circle-plus-outline" @click="addMember()">添加成员</el-button>
                        </div>
                    </template>
                </div>
                <div class="person_center flex" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <el-table ref="multipleTable" :row-key="(row)=>{ return row.id}" :data="tableData" height="100%" class="com_table" @selection-change="handleSelectionChange">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据</div>
                        </div>
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                        </el-table-column>
                        <el-table-column prop="nickname" label="姓名" min-width="160">
                            <template slot-scope="scope">
                                <div class="flexbox flexcenter">
                                    <span class="name_head">{{scope.row.nickname | keepOneNumS}}</span>
                                    {{scope.row.nickname}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="only" label="唯一码" min-width="100"></el-table-column>
                        <el-table-column prop="contact_phone" label="手机号" min-width="130">
                        </el-table-column>
                        <el-table-column prop="department_name" label="所属部门" min-width="140">
                        </el-table-column>
                        <el-table-column prop="authorize_name" label="权限" min-width="120">
                        </el-table-column>
                        <el-table-column prop="function_name" label="职能" min-width="120">
                        </el-table-column>
                        <el-table-column prop="salary" label="人员成本" min-width="120">
                        </el-table-column>
                        <el-table-column prop="coefficient" label="绩效系数" min-width="120">
                        </el-table-column>
                        <el-table-column prop="partner_name" label="上级联系人" min-width="120">
                            <template slot-scope="scope">
                                {{scope.row.partner_name?scope.row.partner_name:"--"}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="在职状态" min-width="120">
                            <template slot="header" slot-scope="scope">
                                <div class="flexbox flexcenter">
                                    在职状态
                                    <el-popover placement="bottom" width="50" trigger="click" popper-class="relate_pop">
                                        <el-checkbox-group v-model="queryInfo.status" class="stra_status" @change="changeStatus">
                                            <el-checkbox label="1">在职</el-checkbox>
                                            <el-checkbox label="0">离职</el-checkbox>
                                        </el-checkbox-group>
                                        <div slot="reference" class="rank_status" :class="{'active':queryInfo.status.length>0}">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="inherit" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M3.02806 3C2.61096 3 2.37722 3.48061 2.63474 3.80871L6.69332 8.97963C6.76243 9.06769 6.8 9.1764 6.8 9.28834V13.4085C6.8 13.5924 6.90096 13.7615 7.06286 13.8487L8.46286 14.6029C8.79598 14.7823 9.2 14.5411 9.2 14.1627V9.28834C9.2 9.1764 9.23757 9.06769 9.30668 8.97963L13.3653 3.80871C13.6228 3.48061 13.389 3 12.9719 3H3.02806Z" fill="inherit" />
                                            </svg>
                                        </div>
                                    </el-popover>
                                </div>
                            </template>
                            <template slot-scope="scope">
                                <div class="flexbox flexcenter" v-if="scope.row.status==1">
                                    <span class="status_circle status_circle_green"></span>
                                    <span class="status_text_green">在职</span>
                                </div>
                                <div class="flexbox flexcenter" v-else>
                                    <span class="status_circle status_circle_gray"></span>
                                    <span class="status_text_gray">离职</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="操作" width="100" fixed="right">
                            <template slot-scope="scope">
                                <el-dropdown placement='bottom'>
                                    <div class="icon_btn flexbox flexcenter"><img src="../../assets/img/more_icon.svg" alt=""></div>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native='editMember(scope.row)'>
                                            <div class="drop_item flexbox flexcenter">
                                                <img src="../../assets/img/edit_icon2.svg" alt="" class="drop_icon">
                                                <span class="drop_title">编辑信息</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native='disaMember(scope.row,0)' v-if="scope.row.status==1">
                                            <div class="drop_item flexbox flexcenter">
                                                <img src="../../assets/img/disa_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">禁用成员</span>
                                            </div>
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native='actMember(scope.row,1)' v-else>
                                            <div class="drop_item flexbox flexcenter">
                                                <img src="../../assets/img/act_icon.svg" alt="" class="drop_icon">
                                                <span class="drop_title">激活成员</span>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page_box flexbox flexcenter" v-if="total>0">
                    <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import AddDepart from "./AddDepart";
import EditDepart from "./EditDepart";
import AddChildDepart from "./AddChildDepart";
import AddMember from "./AddMember";
import EditMember from "./EditMember";
import AddFun from "./AddFun";
import EditFun from "./EditFun";
import MemberJur from "./MemberJur";
export default {
    name: "",
    data() {
        return {
            currActive: 0,
            currFun: -1,
            loading: false,
            isOpen: [0],
            title: "全部人员",
            memberData: {},
            currentNodekey: 0, //默认选中的节点树
            departData: [], //部门列表
            funData: [], //职能列表
            users: [], //已勾选成员
            queryInfo: {
                department: 0,
                page: 1,
                limit: 20,
                query: "",
                function: 0,
                status:[],
            },
            total: 0,
            setpage: 1,
            tableData: [],
            defaultProps: {
                children: "next",
                label: "name",
            },
        };
    },
    created() {
        this.getDepartList();
        this.getDataList(1);
    },
    methods: {
        // tab切换
        changePart(index, name) {
            this.currActive = index;
            if (index == 0) {
                this.currentNodekey = 0;
                this.getDepartList();
            } else {
                this.currFun = -1;
                this.memberData = {};
                this.getFuntList();
            }
            this.queryInfo.department = 0;
            this.queryInfo.function = 0;
            this.isOpen = [0];
            this.title = name;
            this.getDataList(1);
        },

        // 树形节点点击
        getTreeData(data) {
            this.memberData = {};
            this.title = data.name;
            this.isOpen = [];
            this.isOpen.push(data.id);
            this.queryInfo.department = data.id;
            this.currentNodekey = data.id;
            this.$refs.tree.setCurrentKey(this.currentNodekey);
            this.getDataList(1);
            if (data.id != 0) {
                this.memberData = data;
            }
        },
        // 职能点击
        getFunData(id, index, name) {
            this.currFun = index;
            this.queryInfo.function = id;
            this.title = name;
            this.getDataList(1);
        },
        //获取部门列表
        async getDepartList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/departmentList",
                {
                    pid: 0,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                let arr = [
                    {
                        id: 0,
                        name: "全部人员",
                        next: [],
                    },
                ];
                arr.push.apply(arr, res.data);
                this.departData = arr;
            }
        },

        //获取职能列表
        async getFuntList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/functionList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.funData = res.data;
            }
        },

        //获取数据列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/company/userList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 添加部门
        addDepart() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addDepart", attr);
        },

        // 删除部门
        delDepart(data) {
            this.$confirm(
                "删除部门后，部门下成员将会自动移动到根部门下，请再次确认。",
                "确认是否删除该部门",
                {
                    confirmButtonText: "仍然删除",
                    cancelButtonText: "取消",
                    confirmButtonClass: "comfirm_btn",
                }
            )
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/company/departmentDelete",
                        {
                            id: data.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功",
                        });
                        this.title = "全部人员";
                        this.queryInfo.department = 0;
                        this.getDepartList();
                        this.getDataList(1);
                        this.memberData = {};
                    }
                })
                .catch(() => {});
        },

        // 部门重命名
        editDepart(data) {
            const attr = {
                dialogVsb: true,
                name: data.name,
                id: data.id,
            };
            this.$bus.emit("editDepart", attr);
        },

        // 添加职能
        addFun() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addFun", attr);
        },

        // 职能重命名
        editFun(data) {
            const attr = {
                dialogVsb: true,
                id: data.id,
                name: data.name,
            };
            this.$bus.emit("editFun", attr);
        },

        // 删除职能
        delFun(data) {
            this.$confirm("删除职能后成员不会被删除", "确认是否删除职能", {
                confirmButtonText: "仍然删除",
                cancelButtonText: "取消",
                confirmButtonClass: "comfirm_btn",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/company/functionDelete",
                        {
                            id: data.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功",
                        });
                        this.title = "全部";
                        this.queryInfo.function = 0;
                        this.getDataList(1);
                        this.getFuntList();
                    }
                })
                .catch(() => {});
        },

        // 创建子部门
        addChildDepart(data) {
            const attr = {
                dialogVsb: true,
                name: data.name,
                pid: data.id,
            };
            this.$bus.emit("addChildDepart", attr);
        },

        // 添加成员
        addMember() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addMember", attr);
        },

        // 编辑成员
        editMember(row) {
            const attr = {
                dialogVsb: true,
                row: row,
            };
            this.$bus.emit("editMember", attr);
        },

        // 禁用成员
        disaMember(row, type) {
            this.$confirm(
                "禁用后成员将无权限操作系统，是否禁用？",
                "禁用成员",
                {
                    confirmButtonText: "禁用",
                    cancelButtonText: "取消",
                    confirmButtonClass: "comfirm_btn",
                }
            )
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/company/userSetStatus",
                        {
                            users: [row.id],
                            type: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "禁用成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 批量禁用成员
        batchDisaMember(type) {
            this.$confirm(
                "禁用后成员将无权限操作系统，是否禁用？",
                "禁用成员",
                {
                    confirmButtonText: "禁用",
                    cancelButtonText: "取消",
                    confirmButtonClass: "comfirm_btn",
                }
            )
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/company/userSetStatus",
                        {
                            users: this.users,
                            type: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "禁用成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 激活成员
        actMember(row, type) {
            this.$confirm("请问是否激活该成员", "激活成员", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/company/userSetStatus",
                        {
                            users: [row.id],
                            type: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "激活成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 批量激活
        batchActMember(type) {
            this.$confirm("请问是否激活该成员", "激活成员", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/company/userSetStatus",
                        {
                            users: this.users,
                            type: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "激活成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 批量选择
        handleSelectionChange(val) {
            var ids = [];
            val.forEach((element) => {
                ids.push(element.id);
            });
            this.users = ids;
        },

        // 关闭批量选择
        closeCheck() {
            this.users = [];
            this.$refs.multipleTable.clearSelection();
        },

        // 权限设置
        memberJur() {
            const attr = {
                dialogVsb: true,
                users: this.users,
            };
            this.$bus.emit("memberJur", attr);
        },

        changeStatus(v) {
            let arr = v.filter(Boolean);
            this.queryInfo.status = arr;
            this.getDataList(1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddDepart,
        EditDepart,
        AddChildDepart,
        AddMember,
        EditMember,
        AddFun,
        EditFun,
        MemberJur,
    },
};
</script>


<style scoped>
.person_left {
    width: 292px;
    flex-shrink: 0;
    border-right: 1px solid #ebebeb;
}
.person_right {
    flex: 1;
    overflow: auto;
}

.person_header {
    padding: 0 20px;
    height: 71px;
    border-bottom: 1px solid #ebebeb;
}
.person_title {
    font-size: 16px;
    font-weight: bold;
}

.person_center {
    padding: 20px 20px 0;
    overflow-y: auto;
}

.person_job {
    overflow-y: auto;
}

.per_tab {
    justify-content: center;
}
.per_tab li {
    height: 71px;
    line-height: 71px;
    padding: 0 20px;
    position: relative;
    font-size: 16px;
    color: #616c85;
    cursor: pointer;
}
.per_tab li::after {
    transform: scaleX(0);
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-top: 2px solid #4475ff;
    transition: all 0.3s;
}
.per_tab li.active {
    color: #17233d;
}
.per_tab li.active::after {
    transform: scaleX(1);
}

.person_btn {
    padding: 20px;
}
.custom-tree-node {
    height: 48px;
}
.tree_title {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
}
.part_right {
    position: absolute;
    right: 10px;
    display: none;
}
.fun_item {
    height: 48px;
    padding: 0 20px;
    cursor: pointer;
}
.fun_item:hover,
.fun_item.active {
    background-color: #f6f8ff;
}
.fun_name {
    font-size: 14px;
    color: #17233d;
    margin-left: 8px;
}
.fun_do {
    display: none;
}
.fun_item:hover .fun_do {
    display: flex;
}
.name_head {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-color: #4475ff;
    text-align: center;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}
.status_circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
}
.status_circle_green {
    background-color: #00c271;
}
.status_circle_gray {
    background-color: #b4b7bd;
}
.status_text_green {
    color: #00c271;
}
.status_text_gray {
    color: #b4b7bd;
}
.stra_status .el-checkbox {
    display: block;
    margin-right: 0;
    padding: 5px;
}
.rank_status {
    fill: #95a5c9;
}
.rank_status.active {
    fill: #4475ff;
}
</style>

<style>
.relate_pop {
    min-width: 80px !important;
}
.part_tree .el-tree-node__content {
    height: 48px;
    position: relative;
}
.part_tree .el-tree-node__expand-icon {
    color: #17233d;
    margin-left: 15px;
}
.part_tree .el-tree-node__expand-icon.is-leaf {
    color: transparent;
}
.part_tree .el-tree-node__content:hover {
    background-color: #f6f8ff;
}
.part_tree .el-tree-node__content:hover .part_right {
    display: flex;
}
</style>


